import React, { Suspense } from "react";
import { 
  Routes, Route, useNavigate, useLocation, 
  useParams, useSearchParams 
} from 'react-router-dom';
import routes from "./routes";

// 统一配置一级路由
const Element = (props) => {
  let { component: Component } = props,
      navigate = useNavigate(),
      location = useLocation(),
      params = useParams(),
      [search] = useSearchParams()
  return <Component navigate={navigate} location={location} params={params} search={search} />
}

// 配置二级路由
/* const ChildrenElement = (props) => {
  const { children } = props,
        navigate = useNavigate(),
        location = useLocation(),
        params = useParams(),
        [search] = useSearchParams()
  if (!children) {
    return null
  }
  return children.map(value => {
    const { component: Component, name, path } = value
    return (
      <Route key={name} path={path} element={<Component navigate={navigate} location={location} params={params} search={search} />}>
        {ChildrenElement(value)}
      </Route>
    )
  })
} */

export default function RouterView() {
  return (
    <Suspense>
      <Routes>
        {
          routes.map(item => {
            const { name, path } = item
            return (
              <Route key={name} path={path} element={<Element {...item} />}></Route>
            )
          })
        }
      </Routes>
    </Suspense>
  )
}

